<template>
  <div class="home-page" style="display:none">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
      >
      </c-table-search-form>
      <!-- 内容部分 -->
      <section class="home-content">
        <div class="basic-content">
          <a-card :bordered="false" class="margin-b10">
            <a-divider orientation="left">
              <p>基础数据</p>
            </a-divider>
            <a-row>
              <a-col
                v-for="(item, index) in basicData"
                :key="index"
                :span="4"
                :xs="2"
                :sm="3"
                :md="3"
                :lg="4"
                :xl="4"
              >
                <div class="flex-between content-item">
                  <div class="left">
                    <p><Icon :type="item.icon" :iconStyle="iconStyle" /></p>
                  </div>
                  <div class="right text-align-center">
                    <p class="title">{{ item.title }}</p>
                    <span class="colorMain font15">{{ item.count }}</span>
                    <p class="colorRed font24">{{ item.percent }}</p>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </div>
        <div class="spot-mall-content">
          <a-card :bordered="false" class="margin-b10">
            <a-divider orientation="left">
              <p>交易数据-现货商城</p>
            </a-divider>
            <a-row>
              <a-col
                v-for="(item, index) in spotMallData"
                :key="index"
                :span="4"
                :xs="2"
                :sm="3"
                :md="3"
                :lg="4"
                :xl="4"
              >
                <div class="flex-between content-item">
                  <div class="left">
                    <p><Icon :type="item.icon" :iconStyle="iconStyle" /></p>
                  </div>
                  <div class="right text-align-center">
                    <p class="title">{{ item.title }}</p>
                    <span class="colorMain font15">{{ item.count }}</span>
                    <p class="colorRed font24">{{ item.percent }}</p>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </div>
        <div class="buy-mall-content">
          <a-card :bordered="false" class="margin-b10">
            <a-divider orientation="left">
              <p>交易数据-求购大厅</p>
            </a-divider>
            <a-row>
              <a-col
                v-for="(item, index) in buyMallData"
                :key="index"
                :span="4"
                :xs="2"
                :sm="3"
                :md="3"
                :lg="4"
                :xl="4"
              >
                <div class="flex-between content-item">
                  <div class="left">
                    <p><Icon :type="item.icon" :iconStyle="iconStyle" /></p>
                  </div>
                  <div class="right text-align-center">
                    <p class="title">{{ item.title }}</p>
                    <span class="colorMain font15">{{ item.count }}</span>
                    <p class="colorRed font24">{{ item.percent }}</p>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </div>
      </section>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      iconStyle: {
        fontSize: "30px",
        color: "#758cff"
      },
      basicData: [
        {
          title: "App登录数",
          count: "80",
          percent: "100%",
          icon: "zk-back-mobile"
        },
        {
          title: "Web登录数",
          count: "660",
          percent: "20%",
          icon: "zk-back-web"
        },
        {
          title: "注册用户数",
          count: "878",
          percent: "98%",
          icon: "zk-back-registered-member"
        },
        {
          title: "认证用户数",
          count: "332",
          percent: "96%",
          icon: "zk-back-verified-account"
        },
        {
          title: "认证企业数",
          count: "880",
          percent: "90%",
          icon: "zk-back-identification"
        },
        {
          title: "交易总额（元）",
          count: "23,000,000",
          percent: "10%",
          icon: "zk-back-consumption"
        }
      ],
      spotMallData: [
        {
          title: "发布报价数",
          count: "7676",
          percent: "90%",
          icon: "zk-back-release"
        },
        {
          title: "点价订单数",
          count: "123",
          percent: "40%",
          icon: "zk-back-release-quotation"
        },
        {
          title: "点价订单吨数",
          count: "7899",
          percent: "87%",
          icon: "zk-back-tunnage"
        },
        {
          title: "确定价订单数",
          count: "234",
          percent: "77%",
          icon: "zk-back-order"
        },
        {
          title: "确定价订单吨数",
          count: "897987",
          percent: "95%",
          icon: "zk-back-determine-tonnage"
        },
        {
          title: "点价成交吨数",
          count: "13",
          percent: "50%",
          icon: "zk-back-tunnage"
        },
        {
          title: "确定价成交数",
          count: "233000",
          percent: "15%",
          icon: "zk-back-bargain"
        }
      ],
      buyMallData: [
        {
          title: "发布采购数",
          count: "776",
          percent: "98%",
          icon: "zk-back-release-quotation"
        },
        {
          title: "点价订单数",
          count: "8280",
          percent: "36%",
          icon: "zk-back-release-quotation"
        },
        {
          title: "点价订单吨数",
          count: "6",
          percent: "80%",
          icon: "zk-back-tunnage"
        },
        {
          title: "确定价订单数",
          count: "789",
          percent: "90%",
          icon: "zk-back-order"
        },
        {
          title: "确定价订单吨数",
          count: "880",
          percent: "10%",
          icon: "zk-back-determine-tonnage"
        },
        {
          title: "点价成交吨数",
          count: "455656",
          percent: "10%",
          icon: "zk-back-tunnage"
        },
        {
          title: "确定价成交数",
          count: "256",
          percent: "10%",
          icon: "zk-back-bargain"
        }
      ],
      tableSearchForm: {
        date: ""
      },
      tableSearchFormData: [
        {
          prop: "date",
          type: "date-picker"
        }
      ]
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    // this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onPageOnlod() {
      this.loading = true;
      getUserList()
        .then(res => {
          this.tableData = res.data.pageData;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.home-content {
  p {
    padding: 0;
    margin: 0;
  }
  .product-item {
    display: flex;
    align-items: center;
  }
  .content-item {
    width: 88%;
    padding: 10px 30px;
    margin-bottom: 20px;
    box-shadow: 0 3px 8px #d3ddeb;
    &:hover {
      box-shadow: 0 3px 8px #d3ddeb;
      border-color: transparent;
    }
  }
  .title {
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 5px;
    font-size: 16px;
  }
  .count {
    text-align: center;
  }
  .icon {
    color: #bec7fa;
    font-size: 30px;
  }
  ::v-deep .ant-card-body {
    padding: 15px;
  }
}
</style>
